<template>
	<div class="login-contain">
		<div class="header">
			<div class="header-logo"><img src="../../assets/index/logo.png" alt="" /></div>
		</div>
		<div class="forgetPasswords-register">
			<div class="register-title">
				<div><i class="el-icon-arrow-left" @click="backIcon"></i></div>
				<div style="width: 100%; text-align: center;color: #FFFFFF;font-weight: bold;">账号安全</div>
				<div></div>
			</div>
			<div class="forgetPasswords-form">
				<el-form :model="ruleFormMail" :rules="rulesMail" ref="ruleForm">
					<el-form-item label="请输入账户绑定的邮箱号" prop="email">
						<el-input type="text" v-model="ruleFormMail.email" placeholder="请输入您的邮箱号"></el-input>
					</el-form-item>
					<el-form-item label="图片验证码" prop="passwords" style="margin-bottom: 0.69rem">
						<div style="display: flex">
							<el-input placeholder="请输入验证码" maxlength="4" v-model="ruleFormMail.passwords"></el-input>
							<div style="margin: 0.1rem 0 0 0.2rem;">
								<Sidentify></Sidentify>
							</div>
						</div>
					</el-form-item>
					<el-form-item label="验证码" prop="code">
						<div style="display: flex;justify-content: center;">
							<el-input v-model="ruleFormMail.code" maxlength="6" style="width: 35rem;" placeholder="输入验证码"></el-input>
							<el-button class="register-btn" v-show="show" @click="getCodeBtn">获取验证码</el-button>
							<el-button class="register-btn" v-show="!show">{{ count }}</el-button>
						</div>
					</el-form-item>
				</el-form>
				<el-button type="primary" :loading="loading" style="margin-top: 2.5rem;" @click="next('ruleForm')">
					<span v-if="!loading">下一步</span>
					<span v-else>验证中...</span>
				</el-button>
			</div>
		</div>
	</div>
</template>

<script>
import { sendEmail, passwordForgotSms } from '@/api/api';
import { getItem } from '@/utils/storage.js';
import Sidentify from '@/components/Sidentify'; //**引入验证码组件**
export default {
	name: 'forgetPasswords',
	components: {
		Sidentify
	},
	data() {
		const emailRule = (rule, value, callback) => {
			if (value == null) {
				callback('请输入邮箱号');
			} else if (!/^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$/.test(value)) {
				callback(new Error('请输入正确的邮箱格式'));
			} else {
				callback();
			}
		};
		const passwordsRules = (rule, value, callback) => {
			if (value === '') {
				callback(new Error('请输入验证码'));
			} else if (this.ruleFormMail.passwords != getItem('picker')) {
				console.log(this.ruleFormMail.passwords);
				console.log(getItem('picker'));
				callback(new Error('请输入正确验证码'));
			} else {
				callback();
			}
		};
		return {
			//状态
			loading: false,
			//倒计时
			show: true,
			count: '',
			timer: null,
			//表单
			ruleFormMail: {
				email: null,
				passwords: null,
				code: null
			},
			//校验
			rulesMail: {
				email: [{ required: true, validator: emailRule, trigger: 'blur' }],
				passwords: [{ required: true, validator: passwordsRules, trigger: 'blur' }],
				code: [{ required: true, message: '请输入验证码', trigger: 'blur' }]
			}
		};
	},
	created() {},
	methods: {
		backIcon() {
			this.$router.push({
				path: '/login'
			});
		},
		//验证码接口
		getCode() {
			let formData = new FormData();
			formData.append('email', this.ruleFormMail.email);
			sendEmail(formData).then(res => {
				if (res.code == 1001) {
					this.msgSuccess(res.msg);
					const TIME_COUNT = 60;
					if (!this.timer) {
						this.count = TIME_COUNT;
						this.show = false;
						this.timer = setInterval(() => {
							if (this.count > 0 && this.count <= TIME_COUNT) {
								this.count--;
							} else {
								this.show = true;
								clearInterval(this.timer);
								this.timer = null;
							}
						}, 1000);
					}
				}
			});
		},
		//获取验证码
		getCodeBtn() {
			if (this.ruleFormMail.email == null) {
				this.msgError('请先输入邮箱');
			} else {
				this.getCode();
			}
		},
		//下一步
		next(formName) {
			this.$refs[formName].validate(valid => {
				if (valid) {
					this.loading = true;
					passwordForgotSms(this.ruleFormMail).then(res => {
						if (res.code == 1001) {
							this.msgSuccess(res.msg);
							setTimeout(() => {
								this.loading = false;
								this.$router.push({
									path: '/backPassword',
									query: {
										data: this.ruleFormMail.email
									}
								});
							}, 1500);
						} else {
							this.loading = false;
						}
					});
				} else {
					return false;
				}
			});
		}
	}
};
</script>

<style scoped lang="scss">
.login-contain {
	width: 100%;
	height: 100%;
	background-image: url(../../assets/logoin.png);
	background-size: cover; /* 使图片平铺满整个浏览器（从宽和高的最大需求方面来满足，会使某些部分无法显示在区域中） */
	position: absolute; /* 不可缺少 */
	.header {
		display: flex;
		align-items: center;
		width: 100%;
		height: 8rem;
		background: url(../../assets/index/dingbu.png) no-repeat;
		background-size: 100% 100%;
		.header-logo {
			display: flex;
			align-items: center;
			width: 65%;
			margin: 0 auto;
		}
	}
	.forgetPasswords-register {
		width: 35rem;
		height: 33rem;
		margin: auto;
		margin-top: 7rem;
		border-radius: 0.5rem;
		// padding: 1.5rem;
		background-color: #ffffff;
		.register-title {
			background-color: #146ac1;
			border-radius: 0.5rem 0.5rem 0 0;
			width: 100%;
			height: 3rem;
			display: flex;
			flex-direction: row;
			align-items: center;
			div {
				flex: 1;
			}
			/deep/ .el-icon-arrow-left {
				margin-left: 1.2rem;
				font-size: 1.5rem;
				color: #ffffff;
			}
		}
	}
	.forgetPasswords-form {
		width: 20.38rem;
		margin: auto;
		margin-top: 1.5rem;
		/deep/ .el-form-item__label {
			text-align: left;
			color: #000;
			float: none;
			font-weight: bold;
		}

		/deep/ .el-input .el-input__inner,
		.el-input--suffix .el-input__inner {
			height: 2.8rem;
			border: solid 0.06rem #ffffff;
			border-radius: 7px;
			background-color: #f0f0f3;
			color: #ccc;
		}
		/deep/.el-button {
			width: 20.38rem;
			height: 2.63rem;
			background-color: #146ac1;
			font-size: 1rem;
			// margin-top: 1rem;
		}
		.register-btn {
			background-color: #146ac1;
			color: #ffffff;
			margin-left: 0.2rem;
		}
	}
}
</style>
